<!--	Name: index.html
		Description:  The HTML of the AdviseUP application for the alpha release. It formats two pictures:
		a picture of the logo for the application and a picture of a gradient bar for shading on the map. It
		formats a select menu for the area to focus on, a select menu for the type of data to focus on (inquired,
		applied, accepted, enrolled), and it also formats four checkboxes for the years of data analyzed.
			It formats a Google map that changes depending on the options selected by the user. It formats two
		more select menus for the state-to-state or county-to-county comparison. Finally, it formats the barcharts
		that are created upon state-to-state or county-to-county comparison selections by the user.
			It also formats a link to a help page.
		Revision History:
		11/15/2011 Chris Lewis: Commented code for Alpha Release
		11/15/2011 Chris Lewis: Made new structure for elements on page (removed whitespace)
  		10/13/2011 Chris Lewis: Commented the code and put final polish on the file
  		10/13/2011 Chris Lewis: Placed comment header in the file
  		10/10/2011 Chris Lewis: Added include files for the appropriate scripts
		10/10/2011 Et Begert: Created basic HTML elements of the page
		9/2011 tlc: Initial version. -->
<!DOCTYPE html>
<html>
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Mission AdmissionUP</title>
    <!-- Import the appropriate scripts -->
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.6"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js?1.29.6"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="map.js"></script>
    <script type="text/javascript" src="barchart.js"></script>
    <script type="text/javascript" src="PolygonLines/washingtonCounties.js"></script>
    <script type="text/javascript" src="PolygonLines/illinoisCounties.js"></script>
    <script type="text/javascript" src="PolygonLines/oregonCounties.js"></script>
    <script type="text/javascript" src="PolygonLines/californiaCounties.js"></script>
    <script type="text/javascript" src="PolygonLines/hawaiiCounties.js"></script>
	<script type="text/javascript" src="PolygonLines/stateLines.js"></script>
	<!-- Import the css file -->
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<!-- Load the US google map when the body is loaded -->
<body onload="initialize()"> 
	<!-- Format the HTML page. -->
	<img id="logo" alt = "UPlogo" src="Pictures/AdmissionUPLogo.png" />
	<div id = "chooseStateAndCategory" align = "center">
		<table width = "500">
			<tr>
				<td align = "middle">
			    	<select id = "chooseState" name="Choose State" onchange = "update()">
			    		<option>California</option>
			    		<option>Hawaii</option>
			    		<option>Illinois</option>
			    		<option>Oregon</option>
			    		<option>Washington</option>
			    		<option selected>United States</option>
			    	</select>
		    	</td>
		    	<td align = "middle">
			    	<select id = "chooseCategory" name="Choose Category" onchange = "update()">
			    		<option>Number Inquired</option>
			    		<option>Number Applied</option>
			    		<option>Number Accepted</option>
			    		<option>Number Enrolled</option>
			    	</select>
		    	</td>
    		</tr>
		</table>
	</div>
    	<form id="checkboxes">
    		<input id = "2007" type="checkbox" name="year" value="2007" onchange = "update()"/> 2007
    		<input id = "2008" type="checkbox" name="year" value="2008" onchange = "update()"/> 2008
    		<input id = "2009" type="checkbox" name="year" value="2009" onchange = "update()"/> 2009
    		<input id = "2010" checked type="checkbox" name="year" value="2010" onchange = "update()"/> 2010
    	</form>
        <div id="gradientDiv" align = "center">
       	 <img id="gradient" alt = "gradient" src="Pictures/GradientBar.png"/>
        </div>
        <!-- Creating a container for the Google map -->
        <div id="usmap_canvas"></div>
        <div id="comparisonSelections" align = "center">
	    	<table width = "500">
	    		<tr> 
	    			<td align = "middle"><select id = "chooseComparison1" name="Choose Category1" onchange = "drawBarChart()"></select></td>
	    			<td align="middle"> vs. </td>
	    			<td align = "middle"><select id = "chooseComparison2" name="Choose Category2" onchange = "drawBarChart()"></select></td>
	    		</tr>
	    	</table>
	    	<table border = "1">
	    		<tr>
	    			<th colspan = "3"> Number of Students who...</th>
	    		</tr>
	    		<tr>
	    			<td width="210px"><div id="leftSide"></div></td>
	    			<td align = "middle">
	    				<div id="middle">
			    		<div id = "inquired">Inquired</div>
			    		<div id = "applied">Applied</div>
			    		<div id = "accepted">Accepted</div>
			    		<div id = "enrolled">Enrolled</div>
			    		</div> 
			    	</td>
			    	<td width="210px"><div id="rightSide"></div></td>
	    		</tr> 
	    	</table>
        </div>
        <div align = "center">
        	<a href="help.html" textalign = "middle">Help</a>
        </div>
</body>
</html>